<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="box" id="root">hello</div>
    <div id="one"></div>
    <div id="two"></div>

    <script>

        var root = document.getElementById("root");
        root.id = "roots";
        console.log(root.id);

        console.log(root.className);

        //classList提供四个方法，用于添加，删除，判断是否存在
        root.classList.add("mybox");
        root.classList.remove("box");
        console.log(root.classList.contains("mybox"));
        //toggle，若存在则移除，若不存在则添加
        root.classList.toggle("box1");

        //innerHTML和innerText用于设置标签内容
        var str = "<a href = 'https://www.itbaizhan.com'>百战</a>";
        document.getElementById("one").innerHTML = str;
        document.getElementById("two").innerText = str;

        
        

    </script>

</body>
</html>